<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>MyCAT EYE-mycat setting server</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/jquery.mloading.css" />
    <link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css" />
    <link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" title="" type="text/css" />
    <link title="" href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="">
                <a class="mystyle-color" href="../index.html">MyCAT EYE&nbsp;&nbsp;&nbsp;</a>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown" style="min-width:165px;">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mysql：
                    <span id="currentServerId" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulNodeList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mycat：
                    <span id="mycat_server" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulMycatList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown li-border">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                    &nbsp;<span id="login_admin"></span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
                    <li><a href="javascript:void(0)" id="logout">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="down-main">
    <div class="left-main left-full">
        <div class="sidebar-fold">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </div>
        <div class="subNavBox">
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span><span
                        class="sublist-title">常用功能</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />控制台
                        </div>
                        <a href="dashboard.html">
                            <span class="sublist-icon fa fa-dashboard"></span>
                            <span class="sub-title">控制台</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />变量管理
                        </div>
                        <a href="var-manage.html">
                            <span class="sublist-icon fa fa-dot-circle-o"></span>
                            <span class="sub-title">变量管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">InnoDB引擎</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />基本状态
                        </div>
                        <a href="innodb-status.html">
                            <span class="sublist-icon fa fa-heartbeat"></span>
                            <span class="sub-title">基本状态</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />事务查看
                        </div>
                        <a href="innodb-trx.html">
                            <span class="sublist-icon fa fa-retweet"></span>
                            <span class="sub-title">事务查看</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />锁等待信息
                        </div>
                        <a href="innodb-lockwaits.html">
                            <span class="sublist-icon fa fa-lock"></span>
                            <span class="sub-title">锁等待信息</span></a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mysql管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql集群管理
                        </div>
                        <a href="cluster-manage.html">
                            <span class="sublist-icon fa fa-list"></span>
                            <span class="sub-title">Mysql集群管理</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql节点管理
                        </div>
                        <a href="node-manage.html">
                            <span class="sublist-icon fa fa-cubes"></span>
                            <span class="sub-title">Mysql节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mycat管理</span>
                </div>
                <ul class="navContent">
                    <li  class="active">
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat集群管理
                        </div>
                        <a href="mycat-cluster.html">
                            <span class="sublist-icon fa fa-database"></span>
                            <span class="sub-title">Mycat集群管理</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat节点管理
                        </div>
                        <a href="mycat-node.html">
                            <span class="sublist-icon fa fa-cube"></span>
                            <span class="sub-title">Mycat节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">设置</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />系统属性
                        </div>
                        <a href="mycat-setting-myid.html">
                            <span class="sublist-icon fa fa-ban"></span>
                            <span class="sub-title">系统属性</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />参数配置
                        </div>
                        <a href="mycat-setting-server.html">
                            <span class="sublist-icon fa fa-list-alt"></span>
                            <span class="sub-title">参数配置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />数据源设置
                        </div>
                        <a href="mycat-setting-mycat-schema.html">
                            <span class="sublist-icon fa fa-cloud"></span>
                            <span class="sub-title">数据源设置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />分片设置
                        </div>
                        <a href="mycat-setting-rule.html">
                            <span class="sublist-icon fa fa-share"></span>
                            <span class="sub-title">分片设置</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="right-product right-full">
        <div class="container-fluid">
            <div class="info-center">
                <div class="page-header">
                    <div class="pull-left">
                        <h4>参数配置</h4>
                    </div>
                    <div class="pull-right mt10">
                        ...
                    </div>
                </div>

                <div class="panel panel-default panel-intro table-margin">
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade active in" id="one">
                                <div class="widget-body no-padding" id="mycatDataHostTableContainer">
                                    <div class=""><h4><span>数据源</span></h4></div>
                                    <div class="manage-detail">
                                        <div class="margin-tb manage-detail-con clearfix">
                                            <a class="h5 custom pull-left" id="btnAddDataHost" href="javascript:;">新增集群</a>
                                            <a class="h5 custom pull-right margin-min-15" id="getFromZk" href="javascript:void(0);">从zk获取配置</a>
                                            <a class="h5 custom pull-right margin-min-15" id="saveToDB" href="javascript:void(0);">保存后端数据库</a>
                                            <a class="h5 custom pull-right margin-min-15" id="saveToZk" href="javascript:void(0);">保存到ZK</a>
                                        </div>
                                    </div>
                                    <table class="table table-striped" id="mycatDataHostTable">
                                        <thead>

                                        <tr>
                                            <th>名称</th>
                                            <th>数据库类型</th>
                                            <th>最小连接数</th>
                                            <th>最大连接数</th>
                                            <th>balance</th>
                                            <th>writeType</th>
                                            <th>switchType</th>
                                            <th>dbDriver</th>
                                            <th>重试次数</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>

                                </div>

                                <!-- 编辑container-->
                                <div class="" id="container" style="display: none">
                                </div>

                                <div class="widget-body no-padding" id="writeHostContainer" style="display: none">
                                    <div class=""><h4><span></span></h4></div>
                                    <div class="manage-detail">
                                        <div class="margin-tb manage-detail-con clearfix">
                                            <a class="h5 custom pull-left" id="btnAddwriteHost" href="javascript:;">新增writeHost</a>
                                        </div>
                                    </div>
                                    <table class="table table-striped" id="mycatWriteHostTable">
                                        <thead>
                                            <tr>
                                                <th>host</th>
                                                <th>url</th>
                                                <th>user</th>
                                                <th>password</th>
                                                <th>weight</th>
                                                <th>usingDecrypt</th>
                                                <th>编辑</th>
                                            </tr>
                                        </thead>
                                    </table>

                                </div>
                                <!--readHost table -->
                                <div class="widget-body no-padding" id="readHostContainer" style="display: none">
                                    <div class=""><h4><span></span></h4></div>
                                    <div class="manage-detail">
                                        <div class="margin-tb manage-detail-con clearfix">
                                            <a class="h5 custom pull-left" id="btnAddreadHost" href="javascript:;">新增readHost</a>
                                        </div>
                                    </div>
                                    <table class="table table-striped" id="mycatReadHostTable">
                                        <thead>
                                        <tr>
                                            <th>host</th>
                                            <th>url</th>
                                            <th>user</th>
                                            <th>password</th>
                                            <th>weight</th>
                                            <th>usingDecrypt</th>
                                            <th>编辑</th>
                                        </tr>
                                        </thead>
                                    </table>

                                </div>
                                <!--<div class="" id="" style="display: none">-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade myModal" id="myHostModal" tabindex="0" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addHostNode"><span>新增</span>节点</h5>
                <button type="button" class="fa fa-close close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="form-horizontal" id="myHostModalContainer">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-info btn-submit editOrAddHost">提交</button>
            </div>
        </div>
    </div>
</div>





<!-- javascript -->
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="script/bootbox.min.js" type="text/javascript"></script>
<script src="script/jquery.dataTables.min.js"></script>
<!-- loading效果 -->
<script src="script/jquery.mloading.js"></script>
<!-- 自定义javascript -->
<script src="script/custom/menu.js"></script>
<script src="script/custom/login-auth.js"></script>
<script src="script/custom/modify-password.js"></script>
<script src="script/custom/current-node.js"></script>
<script src="../assets/js/utils.js"></script>
<script src="script/juicer-min.js"></script>
<script src="script/layer/layer.js"></script>

<!-- dataHost模板 -->
<script id="tmpl" type="text/template">
    <div class="form-horizontal">
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">name：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${name}" name="name" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">balance：</label>
            <div class="col-sm-10">
                <select  name="balance"  value="${balance}">
                    <option value="0"  ${balance=="0"?"selected":""}> 不开启读写分离</option>
                    <option value="1"  ${balance=="1"?"selected":""}> 非写节点的随机</option>
                    <option value="2"  ${balance=="2"?"selected":""}> 所有writeHost和readHost随机</option>
                    <option value="3"  ${balance=="3"?"selected":""}> 只选择readHost</option>
                </select>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">minCon：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${minCon}" name="minCon" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">maxCon：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${maxCon}" name="maxCon" />
            </div>
        </div>

        <div class="form-group mt10">
            <label class="col-sm-2 control-label">writeType：</label>
            <div class="col-sm-10">
                <select name="writeType" value="${writeType}">
                    <option value="0" ${writeType=="0"?"selected":""}> 单写</option>
                    <option value="1" ${writeType=="1"?"selected":""}> 多写</option>
                </select>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">switchType：</label>
            <div class="col-sm-10">
                <select name="switchType" value="${switchType}">
                    <option value="-1"${switchType==-1?"selected":""}>不自动切换</option>
                    <option value="1" ${switchType==1?"selected":""}> 自动切换</option>
                    <option value="2" ${switchType==2?"selected":""}> 基于主从自动切换</option>
                    <option value="3" ${switchType==3?"selected":""}> 基于galary cluster自动切换</option>
                </select>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">slaveThreshold：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${slaveThreshold}" name="slaveThreshold" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">dbType：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${dbType}" name="dbType" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">dbDriver：</label>
            <div class="col-sm-10">
                <select name="dbDriver" value="${dbDriver}">
                    <option value="native" ${dbDriver=="native"?"selected":""}>native</option>
                    <option value="JDBC" ${dbDriver=="JDBC"?"selected":""}> JDBC</option>
                </select>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">maxRetryCount：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${maxRetryCount}" name="maxRetryCount" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">slaveIDs：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${slaveIDs}" name="slaveIDs" />
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-2 control-label">heartbeat：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" value="${heartbeat}" name="heartbeat" />
            </div>
        </div>

        <div class="form-group mt10">
            <label class="col-sm-4 control-label">&nbsp;</label>
            <div class="col-sm-8">
                <button type="button" class="btn btn-secondary btn-cancel cancelDataHost"  >取消</button>
                <button type="button" class="btn btn-info btn-submit submitDataHost" data-name="${name}" data-type="${type}">提交</button>
            </div>
        </div>
    </div>

</script>

<script id="myHostModalTpl" type="text/template">
    <div id="editHostContainer" class="form-horizontal">
        <input type="hidden" name="type" data-read_host_name="${readHostName}"
               data-write_host_name="${writeHostName}" data-data_host_name="${dataHostName}" data-type="${type}" value="${type}" isWrite="${isWrite}"/>
        <div class="form-group mt10">
            <label class="col-sm-4 control-label">host：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${host}" name="host"/>
            </div>
        </div>
        <div class=" form-group mt10">
            <label class="col-sm-4 control-label">url：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${url}" name="url"/>
            </div>
        </div>
        <div class=" form-group mt10">
            <label class="col-sm-4 control-label">password：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${password}" name="password"/>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-4 control-label">user：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${user}" name="user"/>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-4 control-label">weight：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${weight}" name="weight"/>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-4 control-label">usingDecrypt：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="${usingDecrypt}" name="usingDecrypt"/>
            </div>
        </div>
        <div class="form-group mt10">
            <label class="col-sm-4 control-label">&nbsp;</label>
            <div class="col-sm-8">
                <button type="button" class="btn btn-secondary btn-cancel cancelwriteHost">取消</button>
                <button type="button" class="btn btn-info btn-submit submitWriteHost" data-name="" data-type="add">提交</button>
            </div>
        </div>
    </div>

</script>

<script type="text/javascript">
    var table;
    var dataMap ={};

    function fetchData(forceFromZk) {
        if(table){
            for(var attr in dataMap) {
                delete dataMap[attr];
            }
            $('#container').hide();
            table.destroy();
        }
        table = $('#mycatDataHostTable').DataTable({
            'oLanguage': dtb.oLanguage,
            'ajax': {
                "url":  String.format("/mycat/zk/{0}/schema/dataHost", getParameter("cluster")) ,
                "data":{
                    forceFromZk : forceFromZk?1:0
                },
                "dataSrc": function ( json ) {
                    if(json.code == 200){
                        if(typeof  json.data == "string"){
                            return JSON.parse(json.data);
                        }
                        return json.data;
                    } else{
                        layer.msg("请求失败！");
                    }
                    return [];
                }
            } ,
            'columns': [
                {'data': 'name'},
                {'data': 'dbType'},
                {'data': 'minCon'},
                {'data': 'maxCon'},
                {'data': 'balance'},
                {'data': 'writeType'},
                {'data': 'switchType'},
                {'data': 'dbDriver'},
                {'data': 'maxRetryCount'}
            ],
            'columnDefs': [
                {
                    'render': function(data,type,row,pos){
                        dataMap[row["name"]] = row;
                        return '<a href="javascript:void(0)" class="btn-del text-info" data-name="'+row['name']+'"  data-row="'+pos['row']+'"><i class="fa fa-trash-o"></i> 删除</a> ' +
                            '| <a href="javascript:void(0)" class="btn-edit text-info edit " data-name="'+row['name']+'"  data-row="'+pos['row']+'"><i class="fa fa-edit"></i> 编辑</a>'+
                           String.format( '| <a href="javascript:void(0)" class="btn-edit text-info editWriteHost " data-name="{0}"  data-row="{1}"><i class="fa fa-edit"></i> 编辑writeHost</a>',row['name'] ,pos['row']);
                    },
                    'targets': 9
                },
                {"defaultContent": "",
                    "targets": "_all"}
            ],
            "drawCallback": function( settings ) {
               }
        });
    }
    fetchData();

    var myModal = $("#myModal");

    //getFromZk saveToDB saveToZk
    $("#getFromZk").bind("click",function () {
        fetchData(true);
    });
    //saveSchema
    $("#saveToZk").on("click", function () {
        var list = [];
        for(var schemaName in dataMap) {
            list.push(dataMap[schemaName]);
        }
        saveSchemaToRemote(String.format("/mycat/zk/{0}/schema/dataHost",getUrlParam("cluster")), list);
    });

    $("#saveToDB").on("click", function () {
        var list = [];
        for(var schemaName in dataMap) {
            list.push(dataMap[schemaName]);
        }
        saveSchemaToRemote(String.format("/mycat/zk/{0}/schema/updateLocalDataHost",getUrlParam("cluster")), list);
    })
    var saveSchemaToRemote = function (url, data) {
        $.ajax({
            url: url,
            method: 'post',
            data:{
                body : JSON.stringify(data)
            },
            success: function(res, status,jqxhr){
                if(res.code && res.code==200){
                    layer.msg("保存成功");
                    //fetchData();
                }else{
                    notifi.error('Error: '+res.message)
                }
            },
            error: function(err,status){
                console.log(err);
                notifi.error(err || err.message? err.message:'');
            }
        });
    };
    //新增 dataHost
    $("#btnAddDataHost").bind("click",function () {
        var html = juicer($("#tmpl").html(), {type:"add"})
        $("#container").html(html);
        // myModal.modal('show');
        editOrAddDataHost();

    })
    $("#mycatDataHostTableContainer").on("click",".edit",function () {
        var name = $(this).data("name");
        var json = dataMap[name];
        json.type="edit";
        var html = juicer($("#tmpl").html(), json);
        $("#container").html(html);
        editOrAddDataHost(json);
    });
    //editWriteHost
     var editOrAddDataHost = function (json) {
          laeryId = layer.open({
             type: 1,
             shade: false,
             scrollbar: false,
             area: ['1020px', '640px'], //宽高
             content: $("#container"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
             cancel: function(){
             }
          });
     }
     //dataHost的新增编辑提交.
    $("#container").on("click",".submitDataHost",function () {
        var obj  = {};
        $("#container").find("input,select").each(function () {
            var name = $(this).attr("name");
            var val = $(this).val();
            obj[name] = val;
        });
        //做校验 todo
        var type = $(this) .data("type");
        var oldDataHostName = $(this) .data("name");
        if(type == "edit"){
            $('#mycatDataHostTable').DataTable();
        }
        var json = addDataHost(oldDataHostName, obj);
        if(oldDataHostName !== "") {
            $('#mycatDataHostTable').DataTable().row($("#mycatDataHostTable").find("a[data-name='"+oldDataHostName+"']").parents("tr")).data(json).draw(false);
        }else {
            $('#mycatDataHostTable').DataTable().row.add(json).draw(false);

        }
        layer.close(laeryId);
    });
     //取消编辑dataHostlayer
    $("#container").on("click",".cancelDataHost",function () {
        layer.close(laeryId);
    })

    $("#mycatDataHostTableContainer").on( "click",".btn-del",function () {
        var row = $(this).data("row");
        var name = $(this).data("name");
        table.row(row).remove().draw(false)
        delDataHost(name);
    });

    $("#mycatDataHostTableContainer").on("click",".editWriteHost",function () {
        $("#mycatWriteHostTable").dataTable().fnDestroy();
        var dataHostName = $(this).data("name");
        var dataHost = getDataHost(dataHostName);
        $('#mycatWriteHostTable').attr("dataHostName", dataHostName);
        if(!dataHost["writeHost"]){
            dataHost["writeHost"]=[];
        }
        $('#mycatWriteHostTable').DataTable({
            'oLanguage': dtb.oLanguage,
            "data": dataHost["writeHost"],
            'columns': [
                {'data': 'host'},
                {'data': 'url'},
                {'data': 'user'},
                {'data': 'password'},
                {'data': 'weight'},
                {'data': 'usingDecrypt'}
            ],
            'columnDefs': [
                {
                    'render': function(data,type,row){
                        return '<a href="javascript:void(0)" class="btn-del text-info delWriteTable" data-name="'+row['host']+'"><i class="fa fa-trash-o"></i> 删除</a> ' +
                            '| <a href="javascript:void(0)" class="btn-edit text-info edit editWriteTable" data-name="'+row['host']+'"><i class="fa fa-edit"></i> 编辑</a>'
                            + String.format('| <a href="javascript:void(0)" class="btn-edit text-info edit editreadHostList" data-name="{0}" data-data-host="{0}"><i class="fa fa-edit"></i> 编辑readHost</a>' , row['host'],dataHostName);
                    },
                    'targets': 6
                },
                {"defaultContent": "",
                    "targets": "_all"}
            ],
            "drawCallback": function( settings ) {
            }
        });
        $("#mycatWriteHostTable").attr("style","");
        laeryId = layer.open({
            type: 1,
            shade: false,
            scrollbar: false,
            area: ['1020px', '640px'], //宽高
            content: $("#writeHostContainer"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
            }
        });

    });
    //writeHost 编辑
    ////myHostModalTpl editHostContainer
    //新增
    $("#btnAddwriteHost").bind("click",function () {
        editOrAddWriteHost("" , true , "add" );
    })
    var editOrAddWriteHost = function ( houstName, isWrite, type) {
        var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
        var dataHost = getDataHost(dataHostName);
        var json = dataSource(dataHost.writeHost, "host").get(houstName);
        json = $.extend({
            "dataHostName": dataHostName,
            "writeHostName": houstName,
            "type": type,
            "isWrite": isWrite,
        },json);

        var html = juicer($("#myHostModalTpl").html(), json);
        writeLaeryId = layer.open({
            type: 1,
            shade: false,
            scrollbar: false,
            area: ['500px', '370px'], //宽高
            content: html, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){

            }
        });
        bindEvent();
    };

    //编辑
    $("#mycatWriteHostTable").on("click",".editWriteTable",function(){
        var host = $(this).data("name");
        editOrAddWriteHost(host , true , "edit" );
    });

    //删除writeHost
    $("#mycatWriteHostTable").on("click",".delWriteTable",function(){
        if(confirm("确定删除吗？")) {
            //界面上删除一行shema的记录
            $("#mycatWriteHostTable").DataTable().row($(this).parents('tr')).remove().draw();

            var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
            var dataHost = getDataHost(dataHostName);
            var oldHostName = $(this).data("name");
            dataSource(dataHost.writeHost, "host").del(oldHostName);
            layer.msg("删除成功");
        }
    });

    var bindEvent = function () {
        //提交
        $(".submitWriteHost").click("click",function () {
            var container = $("#editHostContainer");
            var tableContainer = $("#mycatWriteHostTable");
            var obj  = {};
            container.find("input").each(function () {
                var name = $(this).attr("name");
                var val = $(this).val();
                obj[name] = val;
            });
//            obj.autoIncrement = $("#editChildTableContainer").find("input[name=autoIncrement]:checked").val() =="0"?false:true;

            var oldHostName =  container.find("input[name='type']").attr("data-write_host_name");
            var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
            var dataHost = getDataHost(dataHostName);
            obj = dataSource(dataHost.writeHost, "host").add(oldHostName, obj);

            if(oldHostName !== "") {
                tableContainer.DataTable().row(tableContainer.find("a[data-name='"+oldHostName+"']").parents("tr")).data(obj).draw(false);
            }else {
                tableContainer.DataTable().row.add(obj).draw(false);
            }
            layer.close(writeLaeryId);
        });
        $(".cancelwriteHost").click("click",function () {
            layer.close(writeLaeryId);
        });
    };

    //mycatReadHostTable
    $("#mycatWriteHostTable").on("click",".editreadHostList",function(){
        var writeDataHostName = $(this).data("name");
       var readHostList = getReadHostList(writeDataHostName);
       //关闭writeHost表格
        layer.close(laeryId);
        $("#mycatReadHostTable").dataTable().fnDestroy();
        $("#mycatReadHostTable").attr("write_host_name", writeDataHostName);
        $('#mycatReadHostTable').DataTable({
            'oLanguage': dtb.oLanguage,
            "data": readHostList,
            'columns': [
                {'data': 'host'},
                {'data': 'url'},
                {'data': 'user'},
                {'data': 'password'},
                {'data': 'weight'},
                {'data': 'usingDecrypt'}
            ],
            'columnDefs': [
                {
                    'render': function(data,type,row){
                        return String.format(  '<a href="javascript:void(0)" class="btn-del text-info delReadTable" write_host_name="{0}" data-name="'+row['host']+'"><i class="fa fa-trash-o"></i> 删除</a> ',writeDataHostName )
                       + String.format('| <a href="javascript:void(0)" class="btn-edit text-info edit editReadTable" write_host_name="{0}" data-name="'+row['host']+'"><i class="fa fa-edit"></i> 编辑</a>' ,writeDataHostName) ;
                    },
                    'targets': 6
                },
                {"defaultContent": "",
                    "targets": "_all"}
            ],
            "drawCallback": function( settings ) {
            }
        });
        $("#mycatReadHostTable").attr("style","");
        laeryId = layer.open({
            type: 1,
            shade: false,
            scrollbar: false,
            area: ['1020px', '640px'], //宽高
            content: $("#readHostContainer"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
            }
        });

    });

    //删除writeHost
    $("#mycatReadHostTable").on("click",".delReadTable",function(){
        if(confirm("确定删除吗？")) {
            //界面上删除一行shema的记录
            $("#mycatReadHostTable").DataTable().row($(this).parents('tr')).remove().draw();

            var writeHostName =  $("#mycatReadHostTable").attr("write_host_name");
            var readHostList = getReadHostList(writeHostName);
            var readHostName = $(this).data("name");
            var json = dataSource(readHostList, "host").del(readHostName);
            layer.msg("删除成功");
        }
    });

    //编辑
    $("#btnAddreadHost").bind("click", function () {
        editOrAddReadHost("", false, "add");
    });
    //编辑
    $("#mycatReadHostTable").on("click", ".editReadTable", function () {
        var readHostName = $(this).data("name");
        editOrAddReadHost(readHostName, false, "edit");
    });

    var editOrAddReadHost = function ( houstName, isWrite, type) {
//        var writeDataHostName =
        var writeHostName =  $("#mycatReadHostTable").attr("write_host_name");
        var readHostList = getReadHostList(writeHostName);
        var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
        var json = dataSource(readHostList, "host").get(houstName);
        json = $.extend({
            "dataHostName": dataHostName,
            "writeHostName": writeHostName,
            "readHostName": houstName,
            "type": type,
            "isWrite": isWrite,
        },json);

        var html = juicer($("#myHostModalTpl").html(), json);
        readLaeryId = layer.open({
            type: 1,
            shade: false,
            scrollbar: false,
            area: ['500px', '370px'], //宽高
            content: html, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){

            }
        });
//        var container = $("#editHostContainer");
//        var tableContainer = $("#mycatWriteHostTable");
        bindReadEvent($("#editHostContainer"),  $("#mycatReadHostTable"), dataSource(readHostList, "host") , readLaeryId);
    };

    var bindReadEvent = function (container, tableContainer, ds, myLayerId) {
        //提交
        $(".submitWriteHost").click("click",function () {
            var obj  = {};
            container.find("input").each(function () {
                var name = $(this).attr("name");
                var val = $(this).val();
                obj[name] = val;
            });
//            obj.autoIncrement = $("#editChildTableContainer").find("input[name=autoIncrement]:checked").val() =="0"?false:true;

            var oldHostName =  container.find("input[name='type']").attr("data-read_host_name");
            var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
            var dataHost = getDataHost(dataHostName);
            obj = ds.add(oldHostName, obj);

            if(oldHostName !== "") {
                tableContainer.DataTable().row(tableContainer.find("a[data-name='"+oldHostName+"']").parents("tr")).data(obj).draw(false);
            }else {
                tableContainer.DataTable().row.add(obj).draw(false);
            }
            layer.close(myLayerId);
        });
        $(".cancelwriteHost").click("click",function () {
            layer.close(myLayerId);
        });
    };


    var getReadHostList = function (writeDataHost) {
//        var oldHostName =  $container.data("name");
        var dataHostName =  $('#mycatWriteHostTable').attr("dataHostName");
        var dataHost = getDataHost(dataHostName);
        var obj = dataSource(dataHost.writeHost, "host").get(writeDataHost);
        if(obj.readHost == undefined){
            obj.readHost = [];
        }
        return obj.readHost;
    }

    //保存

    //取消

    //封装数据结构
    var getDataHost = function (dataHostName) {
        return dataMap[dataHostName];
    };
    //添加一个dataHost
    var addDataHost = function (oldDataHostName, json) {
        if(oldDataHostName == "") {
            delEmptyAttr(json);
            dataMap[json["name"]] = json;
        } else {
            var obj = dataMap[oldDataHostName];
            delete dataMap[oldDataHostName];
            dataMap[json["name"]] = $.extend(obj, json);
            delEmptyAttr(dataMap[json["name"]]);
        }
        return dataMap[json["name"]];
    };

    var delDataHost = function (dataHostName) {
        dataMap[dataHostName] = null;
    }





</script>
</body>
</html>
